<template>
    <div class="user-info">
      <h1 class="title">用户基本信息</h1>
      <div class="info">
        <p class="name">姓名:{{ this.$store.state.username }}</p>
        <p class="sex">性别:{{ this.$store.state.usersex }}</p>
        <p class="tel">手机号:{{ this.$store.state.usernumber }}</p>
      </div>
      <!-- 退出到login页面 -->
      <el-button @click="outLogin">退出</el-button>
    </div>
  </template>
  
  
  <script>
  export default {
    data() {
      return {
      }
    },
    methods: {
      outLogin() {
        //push到login页面----导航到登录页面
        this.$router.push('/')
      }
    },
  
  }
  
  
  </script>
  
  <style>
  .user-info {
  
    padding: 20px;
    background-color: #f5f5f5;
  }
  
  .title {
  
    font-size: 24px;
    color: #333;
    /* 设置元素的下边距 */
    margin-bottom: 20px;
  }
  
  .info {
  
    display: flex;
    flex-direction: column;
    margin-bottom: 20px;
  }
  
  .name,
  .sex,
  .tel {
    margin-bottom: 10px;
  }
  </style>
  
  